<template>
  <div class="zhuti">
    <div class="left">
      <p @click="chuli(0)" :class="{ activ: num1 == 0 }">
        待处理 <span>0</span>
      </p>
      <p @click="chuli(1)" :class="{ activ: num1 == 1 }">
        待买家处理<span>100</span>
      </p>
      <p @click="chuli(2)" :class="{ activ: num1 == 2 }">
        待卖家处理 <span>20</span>
      </p>
      <p @click="chuli(3)" :class="{ activ: num1 == 3 }">
        已拒绝<span>20</span>
      </p>
      <p @click="chuli(4)" :class="{ activ: num1 == 4 }">
        已完成 <span>20</span>
      </p>
      <p @click="chuli(5)" :class="{ activ: num1 == 5 }">
        已取消 <span>20</span>
      </p>
      <p @click="chuli(6)" :class="{ activ: num1 == 6 }">
        全部 <span>20</span>
      </p>
    </div>
    <div class="boxInput">
      <div class="rig">
        <div>订单号：</div>
        <div>
          <el-input v-model="input" placeholder="请输入" />
        </div>
        <div class="namee">售后类型：</div>
        <div>
          <el-select
            v-model="value"
            class="m-2"
            placeholder="全部"
            size="large"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click="optio(item.value)"
              :class="{ opti: item.value == ative }"
            />
          </el-select>
        </div>
        <el-button class="sou" :loading="true">搜索</el-button>
      </div>
    </div>
    <div class="buttom">
      <div class="Tab">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="60vh"
          :header-cell-style="{ background: '#f5f5f5' }"
        >
          <el-table-column
            prop="mobileEndOrderOrderid"
            label="订单号"
            min-width="120"
            class="TableC"
          />
          <el-table-column prop="mobileEndUser" label="用户" min-width="120" />
          <el-table-column
            prop="mobileEndOrderOrderid"
            label="退款金额"
            min-width="120"
          />
          <el-table-column
            prop="mobileEndOrderOrderid"
            label="售后类型"
            min-width="300"
          />
          <el-table-column
            prop="mobileEndOrderOrderid"
            label="售后状态"
            min-width="120"
          />
          <el-table-column
            prop="mobileEndOrderOrderid"
            label="货物状态"
            min-width="120"
          />
          <el-table-column prop="reason" label="售后原因" min-width="120" />
          <el-table-column prop="salesGoods" label="售后商品" min-width="120" />
          <el-table-column prop="salesTime" label="评价时间" min-width="120" />
          <el-table-column fixed="right" label="操作" min-width="80">
            <template #default="scopee">
              <div class="bbox">
                <el-tooltip content="详情" placement="top">
                  <div class="reply" @click="huifu(scopee)">
                    <el-icon><More /></el-icon>
                  </div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="paging">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 50]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { useCookies } from "@vueuse/integrations/useCookies";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { shouhou } from "./api";
const input = ref("");
const cooks = useCookies();
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const router = useRouter();
let ative = ref(``);
let num1 = ref(0);
//   选择器

const value = ref("");
const options = [
  {
    value: "全部",
    label: "全部",
  },
  {
    value: "退款",
    label: "退款",
  },
  {
    value: "退货",
    label: "退货",
  },
  {
    value: "换货",
    label: "换货",
  },
];
const tableData = ref([{}]);
shouhou()
  .then((res) => {
    tableData.value = [res.data.data.item];
  })
  .catch((eer) => {});
function chuli(can) {
  num1.value = can;
  cooks.set("num1", num1.value);
}
function handleSizeChange() {}

// 页面改变
function handleCurrentChange(p) {}
// 多选器的颜色
function optio(p) {
  ative.value = p;
}
//   详情
function huifu(row) {
  router.push("/discount/Detail6");
}
// function afterSales (row){
//     console.log(11);
// }
const initTabList = () => {
  const tabs = cooks.get("num1");

  if (tabs) {
    num1.value = tabs;
  }
};
initTabList();
</script>

<style scoped>
.opti {
  color: #ff6a6c;
}
.zhuti > .left {
  margin-top: 10px;
  line-height: 40px;
  display: flex;
  justify-content: space-around;
  /* border-bottom: 1px solid black; */
  background-color: white;
  border-radius: 10px;
}
.boxInput > .rig {
  line-height: 40px;
  height: 40px;
  display: flex;
  border-radius: 5px;
  font-size: 14px;
}
.boxInput {
  margin-top: 10px;
  /* height: 76px; */
  padding: 15px 10px;
  border-radius: 10px;
  background-color: white;
}
.sou {
  margin-top: 7px;
  width: 70px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  background-color: #ff6a6c;
  text-align: center;
  border-radius: 5px;
  margin-left: 10px;
  color: white;
}
.namee {
  margin-left: 15px;
}
.left > p > span {
  background-color: #ff6a6c;
  border-radius: 100px;
  padding: 2px 5px;
  font-size: 10px;
}
.buttom {
  color: white;
  background-color: white;
  border-radius: 10px;
}
.header {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.header > div {
  padding: 5px 0px;

  width: 80px;
  text-align: center;
  border-radius: 5px;
}
.header > .left {
  background-color: #f4f4f5;
}
.header > .rig {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #ffa66a;
}
.header > .rig > div {
  font-size: 20px;
  margin-right: 3px;
}
.bbox {
  display: flex;
  padding: 30px 0;
}
.reply {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid black;
  border-radius: 50%;
  font-size: 20px;
  text-align: center;
  margin: 0 auto;
  margin-left: 5px;
  border: 1px #a9acb1 solid;
}
.reply:hover {
  background-color: #ff6a6c;
  color: white;
}
.paging {
  position: fixed;
  bottom: 20px;
}
.activ {
  font-size: 26px;
  font-weight: 900;
}
</style>
